<template>
  <van-sticky>
    <VantNavigationBar title="我的主页"></VantNavigationBar>
  </van-sticky>
  <div class="global_bg">
    <div class="box-bg">
      <div class="info_toux">
        <img
          :src="'http://localhost:8090/' + userInfos.user_image"
          alt="头像"
        />
      </div>
      <div class="info_bg pd3">
        <span class="fts30 ftw">{{ userInfos.user_name }}</span>
        <span class="fts1 ml10">{{ userInfos.gender }}</span>
        <p class="fts1 mt1">{{ userInfos.user_account }}</p>
      </div>
    </div>
    <div class="pdlr3">
      <div
        class="bg_white"
        v-for="dynamic in dynamicList"
        :key="dynamic.active_id"
      >
        <div class="content">
          <div class="title">
            <div class="toux">
              <img :src="'http://localhost:8090/' + dynamic.user_image" />
            </div>
            <span class="fts20 ftw name">{{ dynamic.user_name }}</span>
          </div>
          <div class="product">
            <span class="fts1">{{ dynamic.active_content }}</span>
            <div class="pic_container">
              <img :src="'http://localhost:8090/' + dynamic.active_image" />
            </div>
          </div>
          <div class="time fts1 cgary">
            <span>{{ formattedDate(dynamic.add_time) }}</span>
          </div>
        </div>
      </div>
    </div>
    <van-empty v-if="dynamicList.length === 0" description="还没有动态！" />
  </div>
</template>
<script>
import VantNavigationBar from '@/components/Navbar'
import { Icon, Sticky, showToast, Empty } from 'vant'
import mine from '@/api/mine'
import { ref } from 'vue'
import moment from 'moment'
export default {
  components: {
    VantNavigationBar,
    [Icon.name]: Icon,
    [Sticky.name]: Sticky,
    [showToast.name]: showToast,
    [Empty.name]: Empty,
  },
  setup() {
    const userInfos = ref({})
    const dynamicList = ref([])

    //格式化时间
    const formattedDate = () => {
      return moment().format('YYYY-MM-DD HH:mm:ss')
    }
    //获取用户信息
    mine.getuserInfoApi().then((res) => {
      userInfos.value = res.data
    })

    mine.getDynamicInfo().then((res) => {
      if (res.status === 200) {
        dynamicList.value = res.data
      }
    })
    return {
      userInfos,
      formattedDate,
      dynamicList,
    }
  },
}
</script>
<style scoped>
.box-bg {
  height: 200px;
  position: relative;
  background-image: url('../../assets/beijing.jpg');
  background-size: cover; /* 让背景图片适应盒子大小 */
  border-bottom: 1px solid #ccc;
}
.info_toux {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  left: 20px;
  bottom: 10px;
}
.info_toux > img {
  width: 100%;
  height: 100%;
}
.info_bg {
  height: 100px;
  width: 200px;
  position: absolute;
  bottom: 10px;
  left: 125px;
}
.content {
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
}
.title {
  height: 60px;
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
}
.toux {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
  display: inline-block;
}
.toux img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 使用 object-fit 属性确保图像铺满 */
}
.name {
  margin-left: 10px;
}
.product {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 文字左对齐 */
}

.pic_container {
  height: 200px;
  width: 100%;
}
.pic_container > img {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pic_img {
  width: 100px; /* 图片固定宽度 */
  height: 100px; /* 图片固定高度 */
}
.pic_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 自定义样式 */
.fts1 {
  margin-bottom: 10px; /* 文字与图片之间的间距 */
}
.time {
  text-align: right;
}
</style>
